<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-1">
                        <i class="el-icon-user grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num"><countTo :startVal='startVal' :endVal='userCount' :duration='3000'></countTo></div>
                            <div>用户数量</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <i class="el-icon-goods grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num"><countTo :startVal='startVal' :endVal='rubbishCount' :duration='3000'></countTo></div>
                            <div>垃圾数量</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <i class="el-icon-search grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num"><countTo :startVal='startVal' :endVal='selectRecordCount' :duration='3000'></countTo></div>
                            <div>总查询次数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover" style="height:300px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.png" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>{{lastLoginTime}}</span>
                    </div>
                    <div class="user-info-list">
                        上次登录网络：
                        <span>{{ipAddr}}</span>
                    </div>
                    <div class="user-info-list">
                        上次登录地址：
                        <span>{{addr}}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" style="height:300px;">
                    <div slot="header" class="clearfix">
                        <span>垃圾查询排行</span>
                    </div>
                    <span v-for="(rubbish, index) in rubbishHot">
                        {{rubbish.rubbishName}}<el-progress :percentage="rubbish.percent" :color="rubbish.color"></el-progress>
                    </span>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <div ref="echarts1" class="echart"></div>
                    <!--<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <div ref="echarts2" class="echart"></div>
                    <!--<schart ref="line" class="echart" canvasId="line" :options="options2"></schart>-->
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-card shadow="hover" style="height:469px;">
                <div slot="header" class="clearfix">
                    <span>登录记录</span>
                </div>
                <el-table :show-header="true" :data="todoList" style="width:100%;">
                    <el-table-column prop="index" label="序号" width="50">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="loginIp" label="IP地址">
                    </el-table-column>
                    <el-table-column prop="loginCountry" label="国家">
                    </el-table-column>
                    <el-table-column prop="loginRegion" label="省/区">
                    </el-table-column>
                    <el-table-column prop="loginCity" label="市">
                    </el-table-column>
                    <el-table-column prop="loginIsp" label="县">
                    </el-table-column>
                    <el-table-column prop="loginTime" label="登录时间" width="200">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="tableQuery.pageIndex"
                            :page-size="tableQuery.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </el-card>
        </el-row>
    </div>
</template>

<script>
import bus from '../common/bus';
import Basecharts from './BaseCharts';
import countTo from 'vue-count-to';

export default {
    name: 'dashboard',
    data() {
        return {
            httpUrl: this.GLOBAL.httpUrl,
            name: sessionStorage.getItem('ms_username'),
            startVal: 0,
            lastLoginTime: '未知',
            ipAddr: '未知',
            addr: '未知',
            rubbishCount: 0,
            rubbishHot:[],
            selectRecordCount: 0,
            userCount: 0,
            tableQuery:{
              adminId: 1,
              pageIndex: 1,
              pageSize: 7,
            },
            pageTotal: 0,
            todoList: [],
        };
    },
    components: {
        Basecharts,
        countTo
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    mounted(){

    },
    created() {
        this.init(sessionStorage.getItem("adminId"));
        this.initRubbishCount();
        this.initRubbishHot();
        this.initSelectRecordCount();
        this.initUserCount();
        this.initRubbishDistribute();
        this.initDaysRecord();
        this.initTable();
    },
    methods: {
        init(adminId){
            this.$axios.get(this.httpUrl + '/admin/loginRecord/last',{
                params:{
                    loginAdminId: adminId
                }
            }).then(res=>{
                this.lastLoginTime = this.dateFormat(res.data.data.time);
                this.ipAddr = res.data.data.ip + "  ("+res.data.data.isp+")";
                this.addr = res.data.data.addr
            }).catch(error=>{
                this.$message.error('啊哦~~发生异常咯')
            })
        },
        initRubbishCount(){
            let param = {
                sortId:'',
                name: '',
                pageIndex: 1,
                pageSize: 10
            }
            this.$axios.get(this.httpUrl + '/rubbish/select', {
                params: param
            })
                .then(res=>{
                this.rubbishCount = res.data.data.totalCount
            }).catch(error=>{
                this.$message.error('啊哦~~发生异常咯')
            })
        },
        initRubbishHot(){
            this.$axios.get(this.httpUrl + '/searchRecord/hot')
                .then(res=>{
                    res.data.data[0].color = "#f57161";
                    res.data.data[1].color = "#f1e64d";
                    res.data.data[2].color = "#54f5a2";
                    res.data.data[3].color = "#43b1ff";
                    res.data.data[4].color = "#979499";
                    this.rubbishHot = res.data.data
                }).catch(error=>{
                this.$message.error('啊哦~~发生异常咯')
            })
        },
        initSelectRecordCount(){
            this.$axios.get(this.httpUrl + '/searchRecord/select')
                .then(res=>{
                    this.selectRecordCount = res.data.data.totalCount
                }).catch(error=>{
                this.$message.error('啊哦~~发生异常咯')
            })
        },
        initUserCount(){
            this.$axios.get(this.httpUrl + '/user/select')
                .then(res=>{
                    this.userCount = res.data.data.totalCount
                }).catch(error=>{
                this.$message.error('啊哦~~发生异常咯')
            })
        },
        initRubbishDistribute(){
            this.$axios.get(this.httpUrl + '/rubbish/distribute')
                .then(res=>{
                    let labels = [];
                    let data = [];
                    for(let i=0;i<res.data.data.length;i++){
                        labels.push({
                            name: res.data.data[i].typeName
                        })
                        data.push({
                            name: res.data.data[i].typeName,
                            value: res.data.data[i].num,
                        })
                    }
                    let options = {
                        title: {
                            text: '垃圾类别数量分布',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: labels,
                        },
                        series: [{
                            name: '分类名称',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '50%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    }
                    let myChart = this.$echarts.init(this.$refs.echarts1)
                    // 绘制图表
                    myChart.setOption(options);

                }).catch(error=>{
                this.$message.error('啊哦~~发生异常')
            })
        },
        initDaysRecord(){
            this.$axios.get(this.httpUrl + '/searchRecord/daysRecord')
                .then(res=>{
                    if(res.data.status == 200){
                        let labels = [];
                        let data = [];
                        for(let i=0;i<res.data.data.length;i++){
                            labels.push(res.data.data[i].date)
                            data.push(res.data.data[i].num)
                        }
                        let options = {
                            title: {
                                text: '近几日查询次数',
                                left: 'center'
                            },
                            color: ['#3398DB'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: labels,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '查询次数',
                                    type: 'bar',
                                    barWidth: '50%',
                                    data: data
                                }
                            ]
                        }
                        let myChart = this.$echarts.init(this.$refs.echarts2)
                        // 绘制图表
                        myChart.setOption(options);
                    }else{
                        this.$message.error('啊哦~~发生异常咯')
                    }
                })
                .catch(error=>{
                    this.$message.error('啊哦~~发生异常咯')
                })
        },
        initTable(){
          this.$axios.get(this.GLOBAL.httpUrl + "/admin/loginRecord/all",{
              params: this.tableQuery
          }).then(res=>{
              for(let i=0;i<res.data.data.resultList.length;i++){
                  res.data.data.resultList[i].loginTime = this.dateFormat(res.data.data.resultList[i].loginTime)
              }
              this.todoList = res.data.data.resultList;
              this.pageTotal = res.data.data.totalCount
          }).catch(error=>{
              this.$message.error("啊哦~~发生异常咯")
          })
        },
        handlePageChange(val) {
            this.$set(this.tableQuery, 'pageIndex', val);
            this.initTable();
        },

        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.echart {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 300px;
}
</style>
